<script setup>
import { ref, provide, onMounted, inject } from "vue";
import tabuiation from "@/components/tabuiation.vue";
import forms from "@/components/form.vue";
import formss from "@/components/forms.vue";
import { banjidata, delAll } from "@/api";
import { userPiniaStore } from "@/stores"
const pinia = userPiniaStore()
//班级设置班级名称
const grade = ref("花园小镇一班");
//控制班级设置表格显隐
const tabs = ref(false);
//控制弹窗
const huan = ref(false)
const multidata = ref([])
const banjishuju = async () => {
  const res = await banjidata()
  //   console.log(res.data.data)
  multidata.value = res.data.data
}
//班级设置底部按钮
const looptab = ref([
  {
    id: 1,
    name: "下载学生信息",
  },
  {
    id: 2,
    name: "批量导入",
  },
  {
    id: 3,
    name: "批量删除",
  },
  {
    id: 4,
    name: "批量重置密码",
  },
]);
//点击出现tab栏
const tab = () => {
  tabs.value = !tabs.value;
};
//点击事件出现弹框
const dianji = () => {
  huan.value = !huan.value;
};
provide("dianji", dianji);
provide("huan", huan);
//点击新增弹框和数据
const flag = ref(false)

const add = async () => {
  flag.value = !flag.value;
};
provide("flag", flag);

//点击底部tab
const tabtab = async (id) => {
  if (id == 3) {
    // console.log(pinia.banjidata)
    const res = await delAll(pinia.banjidata)
    console.log(res)
    alert(res.data.msg)
    multidata.value = res.data.data
  }
}
const emmit = async (data) => {
  console.log(data)
  multidata.value = data
}
const sheshi = (data) => {
  multidata.value = data
  // console.log(data)
};

const del = (data) => {
  multidata.value = data
}

onMounted(() => {
  banjishuju();
});
</script>

<template>
  <div class="person-setting-page">
    <div>
      <p class="mainde">我的班级</p>
      <div class="main">
        <p>班级：{{ grade }}</p>
        <p class="iconfont icon-xiajiantou" @click="tab"></p>
      </div>
      <div v-if="tabs">
        <p class="new" @click="add">新增学生</p>
        <tabuiation :multidata="multidata" :type="1" @deldata="del"></tabuiation>
        <div class="footertab">
          <p v-for="item in looptab" :key="item.id" @click="tabtab(item.id)">{{ item.name }}</p>
        </div>
        <div>
          <forms :type="1" @close="sheshi"></forms>
        </div>
        <div>
          <formss :type="5" @emitpasword="emmit"></formss>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.new {
  width: 100px;
  height: 30px;
  background-color: #409eff;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 10px;
}

.main {
  display: flex;
}

.icon-xiajiantou {
  margin-left: 50px;
  font-size: 50px;
  cursor: pointer;
}

.footertab {
  display: flex;
  margin-left: 195px;
}

.footertab p {
  width: 100px;
  height: 30px;
  background-color: #409eff;
  color: #fff;
  text-align: center;
  line-height: 30px;
  margin-top: 20px;
  cursor: pointer;
}

span {
  cursor: pointer;
}

p {
  cursor: pointer;
}

.el-table-column {
  margin-top: 500px;
}

.mainde {
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
